$left-color:  #242e4d;
$right-color: #897e79;
$green-dark:  #35c3c1;
$green-light: #00d6b7;
$gray:        #8f8f8f;
$gray-light:  #f5f6f8;
@import 'src/styles/mixins';
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.main-login {
  @include wh(100%, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  background: rgba(7,17,27,0.95);
  font-family: 'Roboto', helvetica, arial, sans-serif;
  font-size: 1.5em;
}

.login-form {
  z-index: 11;
  width: 100%;
  padding: 60px;
  position: relative;
  background: rgba(97, 101, 105, 0.3);
  &:before {
    content: '';
    position: absolute;
    top: -2px; left: 0;
    height: 2px; width: 100%;
    background: linear-gradient(
        to right,
        $green-dark,
        $green-light
    );
  }
  @media screen and (min-width: 600px) {
    max-width: 456px;
  }
}

.flex-row {
  display: flex;
  margin-bottom: 16px;
}

.lf--label {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $gray-light;
  cursor: pointer;
}
.lf--input {
  flex: 1;
  padding: 16px;
  border: 0;
  color: $gray;
  font-size: 16px;
  &:focus {
    outline: none;
    transition: transform .15s ease;
    transform: scale(1.1);
  }
}

.lf--submit {
  display: block;
  padding: 16px;
  width: 100%;
  background: linear-gradient(
      to right,
      $green-dark,
      $green-light
  );
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(black, .2);
  &:focus {
    outline: none;
    transition: transform .15s ease;
    transform: scale(1.1);
  }
}
::placeholder { color: $gray; }
